<template>
    <div>
        <h1>修改车主卡</h1>
        <hr>
        <el-row :gutter="20" class="input2">
            <el-col :span="8">
                <div><span class="span1">*</span> 用户名：</div>
                <el-input placeholder="请输入用户名" v-model="input" clearable class="input1">
                </el-input>
            </el-col>
            <el-col :span="8">
                <div><span class="span1">*</span>车牌号:</div>
                <el-input placeholder="请输入车牌号" v-model="input" clearable class="input1">
                </el-input>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="input2">
            <el-col :span="8">
                <div><span class="span1">*</span> 联系电话：</div>
                <el-input placeholder="请输入联系电话" v-model="input" clearable class="input1">
                </el-input>
            </el-col>
            <el-col :span="8">
                <div><span class="span1">*</span>持卡人:</div>
                <el-input placeholder="请输入持卡人" v-model="input" clearable class="input1">
                </el-input>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="input2">
            <el-col :span="8">
                <div> 行驶证车主姓名：</div>
                <el-input placeholder="请输入行驶证车主姓名：" v-model="input" clearable class="input1">
                </el-input>
            </el-col>
            <el-col :span="8">
                <div>车主身份证号:</div>
                <el-input placeholder="请输入车主身份证号" v-model="input" clearable class="input1">
                </el-input>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="input2">
            <el-col :span="8">
                <div>品牌型号：</div>
                <el-input placeholder="请输入车辆品牌型号" v-model="input" clearable class="input1">
                </el-input>
            </el-col>
            <el-col :span="8">
                <div>车辆识别代码：</div>
                <el-input placeholder="请输入车辆识别代码" v-model="input" clearable class="input1">
                </el-input>
            </el-col>
           
        </el-row>
        <el-row :gutter="20" class="input2">
            <el-col :span="8">
                <div> 车辆发动机号：</div>
                <el-input placeholder="请输入车辆发动机号：" v-model="input" clearable class="input1">
                </el-input>
            </el-col>
            <el-col :span="8">
                <div>商业险到期日:</div>
                <div class="block">
                    <el-date-picker v-model="value" type="date" placeholder="选择日期" class="input1">
                    </el-date-picker>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="input2">
            <el-col :span="8">
                <div>交强险到期日:</div>
                <div class="block">
                    <el-date-picker v-model="value" type="date" placeholder="选择日期" class="input1">
                    </el-date-picker>
                </div>
            </el-col>
            <el-col :span="8">
                <div>车辆初登日期:</div>
                <div class="block">
                    <el-date-picker v-model="value" type="date" placeholder="选择日期" class="input1">
                    </el-date-picker>
                </div>
            </el-col>
        </el-row>  
                <div> 行驶证附件：</div>
                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>        
        <el-row class="input2">       
                <el-button type="primary">保存</el-button>
                <el-button>取消</el-button>          
        </el-row>

    </div>
</template>

<script>
export default {
    data() {
        return {
            desc: '',
            input: '',
            value: '',
            value1: '',
               imageUrl: '',
            cities: [{
                value: 'Beijing',
                label: '北京'
            }, {
                value: 'Shanghai',
                label: '上海'
            }, {
                value: 'Nanjing',
                label: '南京'
            }, {
                value: 'Chengdu',
                label: '成都'
            }, {
                value: 'Shenzhen',
                label: '深圳'
            }, {
                value: 'Guangzhou',
                label: '广州'
            }],
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
        }
    },
  methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }}
}
</script>

<style scoped>
/* *{
    padding: 0;
    margin: 0;
} */
.input1 {
    width: 400px;
}

.input3 {
    width: 600px;
    height: 150px;
}

.left1 {
    float: left;
}

.span1 {
    color: red;
}

.input2 {
    padding-top: 15px;
    padding-bottom: 15px;
}

  .avatar-uploader .el-upload {
    /* border: 1px dashed #d9d9d9; */
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .avatar-uploader{
     border: 1px solid #d9d9d9;
     width: 178px;
  }

</style>